<template>
  <!--确认投注弹出层-->
  <div class="setABetBack">
    <div class="setABetMain">
      <div class="setABetTitle"><p>温馨提示</p></div>
      <div class="setABetDate"><p>你确定加入<span>{{creditTheDate}}</span>期?</p></div>
      <div class="setABetList">
        <ul class="setABetListTitle">
          <li class="displayFlex">
            <p v-for="set in setABetTitle">{{set}}</p>
          </li>
        </ul>
        <ul class="setABetCList scrollBar">
          <li class="displayFlex" v-for="setABet in setABetContentData">
            <p>{{setABet.playedGroupName}}</p>
            <p>{{setABet.playedName}}</p>
            <p>{{setABet.actionData}}</p>
            <p>{{setABet.actionNum}}</p>
            <p>{{setABet.odds}}</p>
            <p>{{setABet.rebate}}</p>
            <p>{{setABet.amount}}</p>
          </li>
        </ul>
      </div>
      <div class="setABetListAmount">
        <p>总注数：<span>{{numTotal.num}}</span>注</p>
        <p>总金额：<span>{{numTotal.amount}}</span>元</p>
      </div>
      <div class="setABetListBtn">
        <p><a href="javascript:void(0)" @click="cancel">取消</a></p>
        <p><a href="javascript:void(0)" @click="determine">确定</a></p>
      </div>
    </div>
  </div>
</template>

<script>
  import './setABet.scss';
  import {mapState, mapActions} from 'vuex';
  
  export default {
    data() {
      return {
        setABetTitle: ['玩法组', '玩法', '内容', '注数', '赔率', '返点', '单注金额(元)'],
        setABetContentData: [],
        numTotal: {
          num: 0,
          amount: 0
        },
        creditTheDate: '', //期号
        lotteryName: '', //彩种名称
        chains: false, //枷锁
      }
    },
    computed: {
      ...mapState({
        initLotteryData: state => state.mutations.initLotteryData,
        userInfo: state => state.mutations.userInformation, //用户信息
      }),
    },
    mounted() {
      this.initData();
    },
    activated() {
      this.cancel();
    },
    methods: {
      initData() {
        let that = this;
        that.setABetContentData = that.initLotteryData.data || [];
        that.creditTheDate = that.initLotteryData.number;
        that.lotteryName = that.initLotteryData.name;
        let amountObj = that._Util.totalNumberNotes(that.setABetContentData);
        that.numTotal.num = amountObj.num;
        that.numTotal.amount = amountObj.amount;
      },
      cancel() {
        this.$parent.setABetTrue = false;
        if (this.$route.name == 'baccarat'||this.$route.name == 'adventures') {
          this.$parent.initData();
        } else {
          this.$parent.$refs.creditThe.init();
        }
      },
      determine() {
        let that = this;
        let submissionData = {
          lotteryCode: that.$route.query.code,
          lotteryName: that.lotteryName,        //彩种名称
          actionNo: that.creditTheDate,       //投注期号
          totalNum: that.numTotal.num,            //投注总注数
          totalAmount: that.numTotal.amount,      //投注总金额
          itemStr: JSON.stringify(that.setABetContentData)
        };
        if (that.chains) return;
        that.chains = true;
        that._Util.post(that, that._Api.POST_LOTTERY_BET_LAST, submissionData, (data) => {
          that.chains = false;
          that._Util.showAlert('投注成功');
          if (that.$route.name != 'baccarat'&&this.$route.name != 'adventures') {
            that.$parent.$refs.theColorFooter.initData();
          }
          that.userInfo.memberInfo.amount = parseFloat(that.userInfo.memberInfo.amount) - parseFloat(submissionData.totalAmount);
          that.$store.commit('POST_USER_INFORMATION', that.userInfo);
          setTimeout(function () {
            that.cancel();
          }, 2000);
        }, (data) => {
          if (parseInt(data.code) === 97) {
          }
          that.chains = false;
        }, 'post');
      }
    },
    watch: {
      'initLotteryData'() {
        this.initData();
      }
    }
  }
</script>
